:root
{
--player-width: clamp(var(--player-min-width), var(--vh) * 16 / 9, var(--vw) / 2 - var(--chat-min-width));
}

html, body
{
min-width: calc((var(--player-min-width) + var(--chat-min-width)) * 2);
min-height: max(var(--player-min-height), var(--chat-min-height));
}

.p1, .p2
{
top: 0;
bottom: 0;
width: var(--player-width);
height: auto;
}
.p1
{
left: auto;
right: calc(var(--vw) / 2);
}
.p2
{
left: calc(var(--vw) / 2);
right: auto;
}

.c1, .c2
{
width: calc(var(--vw) / 2 - var(--player-width));
}

.m1, .ch1
{
right: calc(var(--vw) / 2);
}
.sm1
{
right: calc(var(--vw) / 2 + var(--menu-size));
}
.m2, .ch2
{
right: calc(var(--vw) / 2 - var(--player-width));
}
.m2, .sm2
{
top: 0;
}
.sm2
{
right: calc(var(--vw) / 2 + var(--player-width) + var(--menu-size));
}
.ch2
{
top: var(--menu-size);
}